<template>
    <div class="pear-contain">
        <h3>{{a?"Daylight":"Dark"}}</h3>
        <transition name="fade">
            <div class="sun" v-show="a"></div>
        </transition>
        <transition name="fade2">
            <div class="moon" v-show="!a"></div>
        </transition>
        <div class="btn" @click="btnClick">{{a?"白天":"黑夜"}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: true
            }
        },
        methods: {
            btnClick() {
                this.a = !this.a;
                if (this.a) {
                    document.body.style.backgroundColor = "white"
                } else {
                    document.body.style.backgroundColor = "black"
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .pear-contain {
        h3 {
            margin: 20px auto;
            text-align: center;
            color: #F19E62;
        }

        position: relative;
        @keyframes identifier {
            from {
                transform: translateY(100%);
                opacity: 0
            }
            to {
                transform: translateY(0%);
                opacity: 1
            }
        }
        @keyframes against {
            from {
                transform: translateY(0%);
                opacity: 1
            }
            to {
                transform: translateY(100%);
                opacity: 0
            }
        }

        .fade-enter-active {
            animation: identifier .9s;
        }

        .fade-leave-active {
            animation: against .9s;
        }

        @keyframes identifier2 {
            from {
                transform: translateY(100%);
                opacity: 0
            }
            to {
                transform: translateY(-125%);
                opacity: 1
            }
        }
        @keyframes against2 {
            from {
                transform: translateY(0%);
                opacity: 1
            }
            to {
                transform: translateY(100%);
                opacity: 0
            }
        }

        .fade2-enter-active {
            animation: identifier2 .9s;
        }

        .fade2-leave-active {
            animation: against2 .9s;
        }

        .moon {
            margin: 0 auto;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 15px 15px 0 0 yellow;
        }

        .sun {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background-color: #FF4500;
            border-radius: 50%;
            box-shadow: 0 0 20px yellow;
        }

        .btn {
            margin: 0 auto;
            width: 100px;
            height: 40px;
            border: 1px solid brown;
            border-radius: 8px;
            text-align: center;
            line-height: 40px;
            position: absolute;
            top: 300px;
            left: 50%;
            transform: translateX(-50%);
            color: brown;
            cursor: pointer;
            -webkit-user-select: none;

            &:hover {
                background: brown;
                color: #fff;
            }
        }
    }

</style>